<template>
  <div class="project">
    <el-card>
      <el-input class="keyword" placeholder="请输入关键字，按回车查找" v-model="q.keyword" size="small" @keyup.enter.native="handleSearch" />
      <el-button type="primary" size="small" @click="handleAdd('operate_modal', { ifSingle: true, custId: $route.query.custId})" v-if="$route.query.custId">
        新增
      </el-button>
    </el-card>
    <div style="height:10px"></div>
    <el-table :data="tableData" :height="tableHeight">
      <el-table-column prop="projectName" label="项目名称"></el-table-column>
      <el-table-column prop="custName" label="客户名称"></el-table-column>
      <el-table-column prop="userName" label="业务员" width="100px"></el-table-column>
      <el-table-column prop="validDate" label="结束时间" width="180px"></el-table-column>
      <el-table-column prop="ifSingle" label="单独结算" width="100px">
        <template slot-scope="scope">
          {{ scope.row.ifSingle ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column width="200" label="操作"  v-if="$route.query.custId">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit('operate_modal', scope.row)">编辑</el-button>
          <el-button type="text" v-if="scope.row.ifUse === 1" @click="handleToggle(scope.row)">停用</el-button>
          <el-button type="text" v-else @click="handleToggle(scope.row)">启用</el-button>
          <el-button type="text" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <OperateModal ref="operate_modal" @ok="handleSearch" />
  </div>
</template>

<script>
import OperateModal from './modal/operateModal.vue'
import { indexMixin } from '@/utils/mixin'
import { getProjectList2, removeProject, ifuse } from '@/api/project'
export default {
  data () {
    return {
      tableData: [],
      q: {
        keyword: '',
        custId: ''
      }
    }
  },
  mixins: [indexMixin],
  components: {
    OperateModal
  },
  created () {
    if (this.$route.query.custId) {
      this.q.custId = this.$route.query.custId
    }
    this.handleSearch()
  },
  computed: {
    tableHeight () {
      // const pagination = 60
      const condition = 84
      const pagePadding = 40
      const header = 60
      return window.innerHeight - condition - pagePadding - header
    },
  },
  methods: {
    handleSearch () {
      this.queryList()
    },
    async queryList () {
      const res = await getProjectList2(this.q)
      if (res.code === 200) {
        this.tableData = res.data
      } else {
        this.tableData = []
        this.$message.error(res.msg)
      }
    },
    handleEdit (operateRef, row) {
      this.$refs[operateRef].init(row)
      if (row.custName && row.custId) {
        this.$refs[operateRef].options = [{ name: row.custName, custId: row.custId }]
      } else {
        this.$refs[operateRef].options = []
      }
    },
    handleRemove (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      this.$confirm('确定要删除吗？', '提示').then(async () => {
        await removeProject(row.id)
        this.handleSearch()
      })
    },
    async handleToggle (row) {
      if (!row.id) {
        this.$message.warning('数据异常：缺少id')
        return;
      }
      const res = await ifuse(row.id)
      if (res.code === 200) {
        this.handleSearch()
      } else {
        this.$message.error(res.msg)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.project {
  height: 100%;
}
</style>